<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script type="text/javascript">
    // window.location.href='device-topology.html'
  </script>
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <style>
    #sys-menu-title{ position:absolute;padding:5px 10px;display:none;background:#4d5d7c;z-index:999;border-radius:5px;white-space: nowrap;}
    #sys-menu-title:before{display:inline-block;content:""; width:0;height:0;  border-top: 30px solid transparent;  border-right: 50px solid red;  border-bottom: 30px solid transparent;}
  </style>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>
  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <div class="sys-sidebar-menu">
      <ul>
        <li> <a href="device-topology.html"><i class="icon-server"></i><span>设备管理</span></a></li>
        <li> <a href="data-resourceconfig.html"><i class="icon-db-search"></i><span>数据监管</span></a></li>
        <li class="active"> <a href="log-platform.html"><i class="icon-find-in-page"></i><span>审计管理</span></a></li>
        <li> <a href="sys-info.html"><i class="icon-cogs"></i><span>系统管理</span></a></li>
        <li> <a href="user.html"><i class="icon-user-man"></i><span>用户管理</span></a></li>
      </ul>
      <div class="curLineY"></div>
    </div>
    <div class="sys-sidebar-submenu">
      <h2>设备管理</h2>
      <ul>
        <li><a href="log-probe-hbase.html"><i class="icon-track-changes"></i><span>探针审计日志</span></a><em class="open"></em>
          <ul>
            <li><a href="log-probe-hbase.html">Hbase访问日志</a></li>
            <li><a href="log-probe-solr.html">Solr访问日志</a></li>
            <li><a href="log-probe-mysql.html">MySQL访问日志</a></li>
            <li><a href="log-probe-mongodb.html">MongoDB访问日志</a></li>
            <li><a href="log-probe-ftp.html">FTP采集日志</a></li>
          </ul>
        </li>

        <li> <a href="log-dbstatic-hbase.html"><i class="icon-file-text2"></i><span>脱敏审计日志</span></a><em class="open"></em>
          <ul>
            <li><a href="log-dbstatic-hbase.html">数据库静态脱敏</a>
              <ul class="lastmenu">
                <li> <a href="log-dbstatic-hbase.html">Hbase</a></li>
                <li> <a href="log-dbstatic-solr.html">Solr</a></li>
                <li><a href="log-dbstatic-mysql.html">MySql</a></li>
              </ul>
            </li>
            <li><a href="log-dbdynamic-mysql.html">数据库动态脱敏</a>
              <ul class="lastmenu">
                <li> <a href="log-dbdynamic-mysql.html">MySql</a></li>
              </ul>
            </li>
            <li><a href="log-filestatic.html">文件静态脱敏</a></li>
            <li><a href="log-filedynamic.html">文件动态脱敏</a></li>
          </ul>
        </li>

        <li> <a href="javascript:void(0);"><i class="icon-profile"></i><span>运维审计日志</span></a><em class="open"></em>
          <ul>
            <li><a href="log-operation.html">数据运维日志</a></li>
          </ul>
        </li>

        <li class="active"> <a href="log-platform.html"><i class="icon-dvr"></i><span>系统审计日志</span></a><em class="open"></em>
          <ul>
            <li><a href="log-platform.html">监管平台日志</a></li>
            <li><a href="log-probedevice.html">探针设备日志</a></li>
            <li class="active"><a href="log-desensitization.html">脱敏设备日志</a></li>
            <li><a href="log-operationdevice.html">运维设备日志</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>设备列表</h2></div>

    <div class="sys-content">
      <div id="chart1" class="chart"></div>

    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".sys-sidebar-menu  li").on("click", function() {
        $(this).siblings().removeClass('active').end().addClass('active');
      })

      $(".sys-sidebar-menu").on('click',"a", function(event) {
        event.preventDefault();
       $('.toggle-sidebar i').prop("class","icon-toleft");
        $(".sys-main").stop(true).animate({"marginLeft": 260},400);
        $(".sys-sidebar").stop(true).animate({"width": 260},400).removeClass('hide');
      });

      $(".sys-sidebar-menu").on("mouseover", "li", function() {
        var obj=$(this);
        $(".curLineY").stop(true).animate({
          top: obj.position().top,
        }, 200,function(){
         obj.siblings().find('span').stop(true).hide();
         obj.find('span').stop(true).show();
       });

      })


      $(".sys-sidebar-menu").on("mouseout", "li", function() {
        var obj=$(this);
        $(".curLineY").animate({
          top: obj.siblings('.active').position()? obj.siblings('.active').position().top:obj.position().top,
        }, 200,function(){
          $(".sys-sidebar-menu li span").hide();
          // obj.siblings().find('span').hide()
        })
      })
    })

option = {
  title: {
    text: 'IP访问量排名'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  gird:{
    x:'30%',
    top:30
  },
  yAxis: {
    data: ['172.23.87.221','192.187.24.124','172.17.24.124','189.172.27.28','172.3.2.41']
  },
  xAxis: {},
  series: [{
    name: '次数',
    type: 'bar',
    barWidth: 25,
    data: [752,592, 437, 350,223]
  }]
};
var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption(option, true);


    // $(function(){
    //   $.fn.extend({
    //     showTitle:function(){
    //       $('<div id="sys-menu-title"></div>').appendTo('.sys-sidebar-menu');
    //       var d=$("#sys-menu-title");
    //       this.bind({
    //         mouseover:function(){
    //           if(!$("#sys-menu-title")){
    //             $('<div id="sys-menu-title"></div>').appendTo('.sys-sidebar-menu');
    //           }else{
    //             d=$("#sys-menu-title");
    //           }
    //           var of=$(this).offset();
    //           var title=$(this).find("span").text();

    //           d.css({top:of.top-45+"px",left: "60px"}).text(title);
    //           d.show();
    //         },
    //         mouseout:function(){
    //           d.hide();
    //         }
    //       });
    //     }
    //   });

    //   $(".sys-sidebar-menu  li").showTitle();
    // });
</script>
</body>
</html>